<template>
	<view class="container">
		<view class="main">
			<view class="item" @click="handleDetail">
				<view class="item-icon">
					拼多多
				</view>
				<view class="item-content">
					<view class="item-top">
						<view class="item-title">
							<view class="title">
								<text>拼多多领现金任务</text><text class="iconfont icontubiao303"></text>
							</view>
							<view class="time">
								2020/11/27 10:29
							</view>
						</view>
						<view class="item-number">
							<text>
								剩余：<text>0</text>/20
							</text>
							<text class="iconfont iconicon-"></text>
						</view>
					</view>
					<view class="item-main">
						 <view class="infoItem">
						 	已报名:<text>20</text>
						 </view>
						 <view class="infoItem">
						 	未提交:<text>20</text>
						 </view>
						 <view class="infoItem">
						 	待审核:<text class="color">20</text>
						 </view>
						 <view class="infoItem">
						 	未通过:<text>20</text>
						 </view>
						 <view class="infoItem">
						 	已通过:<text>20</text>
						 </view>
						 <view class="infoItem">
						 	纠纷单:<text>20</text>
						 </view>
					</view>
					<view class="item-bot">
						<view class="btn-status1">
							<view class="common-btn closeing-btn">
								关闭任务
							</view>
							<view class="common-btn again-btn">
								再次置顶
							</view>
							<view class="common-btn check-btn">
								去审核
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="item-icon">
					拼多多
				</view>
				<view class="item-content">
					<view class="item-top">
						<view class="item-title">
							<view class="title">
								<text>拼多多领现金任务</text><text class="iconfont icontubiao303"></text>
							</view>
							<view class="time">
								2020/11/27 10:29
							</view>
						</view>
						<view class="item-number">
							<text>
								剩余：<text>0</text>/20
							</text>
							<text class="iconfont iconicon-"></text>
						</view>
					</view>
					<view class="item-main">
						 <view class="infoItem">
						 	已报名:<text>20</text>
						 </view>
						 <view class="infoItem">
						 	未提交:<text>20</text>
						 </view>
						 <view class="infoItem">
						 	待审核:<text class="color">20</text>
						 </view>
						 <view class="infoItem">
						 	未通过:<text>20</text>
						 </view>
						 <view class="infoItem">
						 	已通过:<text>20</text>
						 </view>
						 <view class="infoItem">
						 	纠纷单:<text>20</text>
						 </view>
					</view>
					<view class="item-bot">
						<view class="btn-status1" v-if="status === 0">
							<view class="common-btn closeing-btn">
								关闭任务
							</view>
							<view class="common-btn again-btn">
								再次置顶
							</view>
							<view class="common-btn check-btn">
								去审核
							</view>
						</view>
						<view class="btn-status2" v-if="status === 2">
							<view class="closed-btn">
								已结束
							</view>
							<view class="check-btn">
								去审核
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="item-icon">
					拼多多
				</view>
				<view class="item-content">
					<view class="item-top">
						<view class="item-title">
							<view class="title">
								<text>拼多多领现金任务</text><text class="iconfont icontubiao303"></text>
							</view>
							<view class="time">
								2020/11/27 10:29
							</view>
						</view>
						<view class="item-number">
							<text>
								剩余：<text>0</text>/20
							</text>
							<text class="iconfont iconicon-"></text>
						</view>
					</view>
					<view class="item-main">
						 <view class="infoItem">
						 	已报名:<text>20</text>
						 </view>
						 <view class="infoItem">
						 	未提交:<text>20</text>
						 </view>
						 <view class="infoItem">
						 	待审核:<text class="color">20</text>
						 </view>
						 <view class="infoItem">
						 	未通过:<text>20</text>
						 </view>
						 <view class="infoItem">
						 	已通过:<text>20</text>
						 </view>
						 <view class="infoItem">
						 	纠纷单:<text>20</text>
						 </view>
					</view>
					<view class="item-bot">
						<view class="btn-status1" v-if="status === 0">
							<view class="common-btn closeing-btn">
								关闭任务
							</view>
							<view class="common-btn again-btn">
								再次置顶
							</view>
							<view class="common-btn check-btn">
								去审核
							</view>
						</view>
						<view class="btn-status2" v-if="status === 1">
							<view class="closed-btn">
								已关闭
							</view>
							<view class="check-btn">
								去审核
							</view>
						</view>
						<view class="btn-status2" v-if="status === 2">
							<view class="closed-btn">
								已结束
							</view>
							<view class="check-btn">
								去审核
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="item-icon">
					拼多多
				</view>
				<view class="item-content">
					<view class="item-top">
						<view class="item-title">
							<view class="title">
								<text>拼多多领现金任务</text><text class="iconfont icontubiao303"></text>
							</view>
							<view class="time">
								2020/11/27 10:29
							</view>
						</view>
						<view class="item-number">
							<text>
								剩余：<text>0</text>/20
							</text>
							<text class="iconfont iconicon-"></text>
						</view>
					</view>
					<view class="item-main">
						 <view class="infoItem">
						 	已报名:<text>20</text>
						 </view>
						 <view class="infoItem">
						 	未提交:<text>20</text>
						 </view>
						 <view class="infoItem">
						 	待审核:<text class="color">20</text>
						 </view>
						 <view class="infoItem">
						 	未通过:<text>20</text>
						 </view>
						 <view class="infoItem">
						 	已通过:<text>20</text>
						 </view>
						 <view class="infoItem">
						 	纠纷单:<text>20</text>
						 </view>
					</view>
					<view class="item-bot">
						<view class="btn-status1" v-if="status === 0">
							<view class="common-btn closeing-btn">
								关闭任务
							</view>
							<view class="common-btn again-btn">
								再次置顶
							</view>
							<view class="common-btn check-btn">
								去审核
							</view>
						</view>
						<view class="btn-status2" v-if="status === 1">
							<view class="closed-btn">
								已关闭
							</view>
							<view class="check-btn">
								去审核
							</view>
						</view>
						<view class="btn-status2" v-if="status === 2">
							<view class="closed-btn">
								已结束
							</view>
							<view class="check-btn">
								去审核
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="item-icon">
					拼多多
				</view>
				<view class="item-content">
					<view class="item-top">
						<view class="item-title">
							<view class="title">
								<text>拼多多领现金任务</text><text class="iconfont icontubiao303"></text>
							</view>
							<view class="time">
								2020/11/27 10:29
							</view>
						</view>
						<view class="item-number">
							<text>
								剩余：<text>0</text>/20
							</text>
							<text class="iconfont iconicon-"></text>
						</view>
					</view>
					<view class="item-main">
						 <view class="infoItem">
						 	已报名:<text>20</text>
						 </view>
						 <view class="infoItem">
						 	未提交:<text>20</text>
						 </view>
						 <view class="infoItem">
						 	待审核:<text class="color">20</text>
						 </view>
						 <view class="infoItem">
						 	未通过:<text>20</text>
						 </view>
						 <view class="infoItem">
						 	已通过:<text>20</text>
						 </view>
						 <view class="infoItem">
						 	纠纷单:<text>20</text>
						 </view>
					</view>
					<view class="item-bot">
						<view class="btn-status1" v-if="status === 0">
							<view class="common-btn closeing-btn">
								关闭任务
							</view>
							<view class="common-btn again-btn">
								再次置顶
							</view>
							<view class="common-btn check-btn">
								去审核
							</view>
						</view>
						<view class="btn-status2" v-if="status === 1">
							<view class="closed-btn">
								已关闭
							</view>
							<view class="check-btn">
								去审核
							</view>
						</view>
						<view class="btn-status2" v-if="status === 2">
							<view class="closed-btn">
								已结束
							</view>
							<view class="check-btn">
								去审核
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!--加载loadding-->
		<tui-loadmore v-if="loadding"></tui-loadmore>
		<tui-nomore v-if="!pullUpOn"></tui-nomore>
		<!--加载loadding-->
		<tui-fab :left="left" :right="right" :bottom="bottom" :bgColor="bgColor" :btnList="btnList" @click="handlebottom"></tui-fab>
		<tui-bottom-popup class="tui-task-bottom" :zIndex="100000" :maskZIndex="99999" :show="popupShow" @close="popup">
			<view class="tui-task">
				<view class="tui-task-title">选择任务类型</view>
				<view class="taskMain">
					<tui-grid :unlined="true" v-if="popupInShow">
						<tui-grid-item :cell="3" backgroundColor="rgba(0,0,0,0)" :bottom="false">
							<view class="bounceInUp">
								<view class="tui-grid-icon">
									<image src="../../../static/images/nav1.png" mode=""></image>
								</view>
								<text class="tui-grid-label">京东金融</text>
							</view>
						</tui-grid-item>
						<tui-grid-item :cell="3" backgroundColor="rgba(0,0,0,0)" :bottom="false">
							<view class="bounceInUp delay200">
								<view class="tui-grid-icon">
									<image src="../../../static/images/nav2.png" mode=""></image>
								</view>
								<text class="tui-grid-label">滴滴</text>
							</view>
						</tui-grid-item>
						<tui-grid-item :cell="3" backgroundColor="rgba(0,0,0,0)" :bottom="false" @click="publish">
							<view class="bounceInUp delay400">
								<view class="tui-grid-icon">
									<image src="../../../static/images/nav3.png" mode=""></image>
								</view>
								<text class="tui-grid-label">拼多多</text>
							</view>
		
						</tui-grid-item>
						<tui-grid-item :cell="3" backgroundColor="rgba(0,0,0,0)" :bottom="false">
							<view class="bounceInUp delay100">
								<view class="tui-grid-icon">
									<image src="../../../static/images/nav4.png" mode=""></image>
								</view>
								<text class="tui-grid-label">京东</text>
							</view>
		
						</tui-grid-item>
						<tui-grid-item :cell="3" backgroundColor="rgba(0,0,0,0)" :bottom="false">
							<view class="bounceInUp delay300">
								<view class="tui-grid-icon">
									<image src="../../../static/images/nav5.png" mode=""></image>
								</view>
								<text class="tui-grid-label">快手</text>
							</view>
		
						</tui-grid-item>
						<tui-grid-item :cell="3" backgroundColor="rgba(0,0,0,0)" :bottom="false">
							<view class="bounceInUp delay500">
								<view class="tui-grid-icon">
									<image src="../../../static/images/nav6.png" mode=""></image>
								</view>
								<text class="tui-grid-label">淘宝</text>
							</view>
		
						</tui-grid-item>
					</tui-grid>
				</view>
				<view class="tui-btn-cancle" @tap="popup">
					<image src="../../../static/images/close.png" mode=""></image>
				</view>
			</view>
		</tui-bottom-popup>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				height: 148,
				left: 0,
				right: 16,
				bottom: 80,
				bgColor: "linear-gradient(to right,#fc4250, #fe744b)",
				pageIndex: 1,
				status: 2,
				top: 0, //标题图标距离顶部距离
				opacity: 1,
				scrollTop: 0.5,
				loadding: false,
				pullUpOn: true,
				popupShow: false,
				popupInShow: false,
				newsList: []
			}
		},
		onReady() {},
		methods: {
			back() {
				uni.navigateBack();
			},
			handleDetail () {
				uni.navigateTo({
					url:"/pages/center/myTask/taskDetail"
				})
			},
			handlebottom () {
				this.popupShow = !this.popupShow
				this.popupInShow = !this.popupInShow
			},
			publish () {
				uni.navigateTo({
					url:"/pages/task/pdd/index"
				})
			},
			popup() {
				this.popupShow = !this.popupShow
				setTimeout(()=> {
					this.popupInShow = !this.popupInShow
				},100)
			},
		},
		onPullDownRefresh: function() {
			//延时为了看效果
			setTimeout(() => {
				this.newsList = this.loadData;
				this.pageIndex = 1;
				this.pullUpOn = true;
				this.loadding = false;
				uni.stopPullDownRefresh();
				this.tui.toast("刷新成功");
			}, 200)
		},
		
		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			if (!this.pullUpOn) return;
			this.loadding = true;
			if (this.pageIndex == 3) {
				this.loadding = false;
				this.pullUpOn = false;
			} else {
				this.newsList = this.newsList.concat(this.loadData);
				this.pageIndex = this.pageIndex + 1;
			}
		}
	}
</script>
<style>
	page {
		background: #F8F8F8;
	}
</style>
<style scoped lang="scss">
	.container {
		.tui-header-icon {
			width: 100%;
			position: absolute;
			top: 46rpx;
			padding: 0 12rpx;
			display: flex;
			align-items: center;
			height: 32px;
			transform: translateZ(0);
			z-index: 99999;
			box-sizing: border-box;
		}

		.main {
			padding: 20rpx;
			.item {
				display: flex;
				width: 710rpx;
				margin-bottom: 20rpx;
				padding: 30rpx;
				border-radius: 10rpx;
				box-shadow: 0 0 10rpx #eee;
				box-sizing: border-box;
				background: #fff;

				.item-icon {
					flex: 0 0 84rpx;
					width: 84rpx;
					height: 84rpx;
					margin-right: 24rpx;
					line-height: 84rpx;
					border-radius: 50%;
					box-shadow: 5rpx 5rpx 10rpx  rgba($color: #fc4250, $alpha: .5);
					background: linear-gradient(to right, #fc4250, #fe744b);
					font-size: 22rpx;
					color: #fff;
					text-align: center;
				}

				.item-content {
					flex: 1;

					.item-top {
						margin-bottom: 30rpx;
						height: 84rpx;
						display: flex;
						-webkit-box-pack: justify;
						-webkit-justify-content: space-between;
						-ms-flex-pack: justify;
						justify-content: space-between;
						align-items: center;
						.item-title {
							line-height: 100%;
							.title {
								margin-bottom: 14rpx;
								font-size: 26rpx;
								color: #000;
								font-weight: bold;
								text {
									&:first-child {
										padding-right: 12rpx;
									}
								}
								.iconfont {
									font-size: 30rpx;
									color: #fe4a4f;
								}
							}
							
							.time {
								line-height: 100%;
								font-size: 18rpx;
								color: #838383;
							}
						}
						.item-number {
							padding-right: 10rpx;
							font-size: 24rpx;
							color: #828282;
							&>text {
								vertical-align: middle;
									text {
									color: #fb8f4a;
								}
							}
							.iconfont {
								font-size: 36rpx;
								display: inline-block;
								transform: rotateY(180deg);
								vertical-align: middle;
							}
						}
					}
					.item-main {
						overflow: hidden;
						height: auto;
						.infoItem {
							width: 33%;
							float: left;
							line-height: 100%;
							margin-bottom: 35rpx;
							font-size: 22rpx;
							color: #666;
							text {
								font-weight: bold;
								color: #333;
								&.color {
									color:#fb8f4a ;
								}
							}
						}
					}
					.item-bot {
						.btn-status1 {
							width: 100%;
							height: 54rpx;
							line-height: 54rpx;
							grid-template-columns: 166rpx 166rpx 166rpx;
							grid-column-gap: 22rpx;
							display: grid;
							.common-btn {
								height: 54rpx;
								border-radius: 6rpx;
								box-sizing: border-box;
								border: 1px solid #e85768;
								line-height: 52rpx;
								text-align: center;
								font-size: 24rpx;
								color: #e85768;
							}
						}
						.btn-status2 {
							width: 100%;
							height: 54rpx;
							line-height: 54rpx;
							grid-template-columns: 248rpx 248rpx;
							grid-column-gap: 45rpx;
							display: grid;
							.closed-btn {
								height: 54rpx;
								line-height: 52rpx;
								border-radius: 6rpx;
								box-sizing: border-box;
								border: 1px solid #6b6b6b;
								text-align: center;
								font-size: 24rpx;
								color: #6b6b6b;
							}
							.check-btn {
								height: 54rpx;
								line-height: 52rpx;
								border-radius: 6rpx;
								box-sizing: border-box;
								border: 1px solid #e85768;
								text-align: center;
								font-size: 24rpx;
								color: #e85768;
							}
						}
					}
				}
			}
		}
		.tui-task-bottom {
			.tui-task {
				padding-bottom: 70rpx;
		
				.tui-task-title {
					padding-left: 38rpx;
					font-size: 28rpx;
					color: #333;
					font-weight: bold;
				}
		
				.taskMain {
					min-height: 428rpx;
					text-align: center;
		
					.tui-grid-icon {
						width: 90rpx;
						height: 92rpx;
						margin: 0 auto;
						border-radius: 50%;
						overflow: hidden;
		
						image {
							width: 100%;
							height: 100%;
						}
					}
		
					.tui-grid-label {
						font-size: 26rpx;
						color: #333;
					}
				}
		
				.tui-btn-cancle {
					width: 30rpx;
					height: 30rpx;
					margin: 0 auto;
		
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		
			::v-deep {
				.tui-bottom-popup {
					background: none !important;
				}
		
				.tui-popup-mask {
					overflow: hidden;
					background: rgba(255, 255, 255, 0.8);
					-webkit-backdrop-filter: saturate(180%) blur(40rpx);
					backdrop-filter: saturate(180%) blur(40rpx);
		
				}
		
				.tui-grid::before {
					border-right: none;
				}
			}
		}
	}
</style>
